<template>
  <div>
    <!--评估查验的图片预览-->
    <div v-if="weixinShow" class="des_image">
      <a v-for="(item,index) in list">
        <div class="list_img" v-lazy:background-image="item" @click="preview(index)"></div>
      </a>
    </div>
    <!--普通浏览器图片预览-->
    <!--img标签绑定图片的时候:src路径必须是url-->
    <div v-if="ordinaryShow" class="img_pres">
      <div class="img-box" v-for="(url, index) in list" :style="{'background-image': 'url(' + url + ')'}"
           :key="index">
        <img preview="1" preview-text="" :src="url" alt="">
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  /*微信浏览器*/
  .des_image {
    .list_img {
      width: 100%;
      height: 200px;
      border-radius: 5px;
      margin-top: 10px;
      background-size: cover;
      background-position: center;
      border: 1px solid #f2f2f2;
    }
  }
  /*普通浏览器*/
  .img_pres {
    width: 100%;
    /*height: 200px;*/
    margin-bottom: 10px;
    .img-box {
      /*float: left;*/
      width: 78%;
      height: 122px;
      border-radius: 10px;
      padding: 11%;
      margin-top: 5px;
      /* margin: 0.65%; */
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
      }
    }
  }
</style>
<script>
  import wx from 'weixin-js-sdk'
  import { IsWeiXin } from '../../common/js/isWeiXin'

  export default {
    data () {
      return {
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        }
      }
    },
    props: ['list'],
    created () {
      // console.log(this.list)
      // 如果图片是异步生成，在图片数据更新后调用
      this.$previewRefresh()
      // 判断是否是微信浏览器
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
    },
    methods: {
      preview (index) {
        wx.previewImage({
          current: this.list[index], // 当前显示图片的http链接
          urls: this.list // 需要预览的图片http链接列表
        })
      }
    },
    components: {}
  }
</script>
